<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(200px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }

        td:hover {
            background-color: #1dc5a3;
            transition: all 1s ease;

        }
    </style>
</head>

<body>
    <div id="pp">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加宠物</h3>
            </div>
            <div class="panel-body form-inline">
                <label>id:</label>
                <input type="text" v-model="id" class="form-control">
                <label>name:</label>
                <input type="text" v-model="name" class="form-control">
                <input type="button" value="添加" @click="add" class="btn btn-primary">

            </div>

        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody is="transition-group" appear>
                <tr v-for="item,index in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td style="color: #0e9aef"><a href="#">删除</a></td>
                </tr>
            </tbody>
        </table>


    </div>
    <div>

        <script>
            var vue = new Vue(
                {
                    el: '#pp',
                    data: {
                        id: '',
                        name: '',

                        list: [{ id: 1, name: "小狗", ctime: new Date() }, { id: 2, name: "小猫", ctime: new Date() }, { id: 3, name: "金鱼", ctime: new Date() }, { id: 4, name: "大闸蟹", ctime: new Date() }]

                    },
                    methods: {
                        add: function () {
                            this.list.push({ id: this.id, ctime: new Date(), name: this.name })
                            this.name = this.id = ''
                        }

                    }
                }
            )
        </script>
    </div>
</body>

</html>